import React from 'react';
import { User, Award, Target, Trash2, Download, Upload } from 'lucide-react';
import { UserStats } from '../types';
import { userLevels } from '../data/categories';

interface UserProfileProps {
  stats: UserStats;
  onClearData: () => void;
  onExportData: () => void;
  onImportData: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const UserProfile: React.FC<UserProfileProps> = ({
  stats,
  onClearData,
  onExportData,
  onImportData
}) => {
  const currentLevelInfo = userLevels[stats.currentLevel] || userLevels[0];
  const nextLevelInfo = userLevels[stats.currentLevel + 1];

  // 计算成就
  const achievements = [];
  
  if (stats.totalEvents >= 1) achievements.push({ title: '初次摸鱼', desc: '完成第一次摸鱼记录', icon: '🎉' });
  if (stats.totalEvents >= 10) achievements.push({ title: '摸鱼新手', desc: '记录10次摸鱼', icon: '🐟' });
  if (stats.totalEvents >= 50) achievements.push({ title: '摸鱼达人', desc: '记录50次摸鱼', icon: '🐠' });
  if (stats.totalEvents >= 100) achievements.push({ title: '摸鱼专家', desc: '记录100次摸鱼', icon: '🐡' });
  if (stats.totalDuration >= 60) achievements.push({ title: '时间管理大师', desc: '累计摸鱼1小时', icon: '⏰' });
  if (stats.totalDuration >= 480) achievements.push({ title: '摸鱼马拉松', desc: '累计摸鱼8小时', icon: '🏃‍♂️' });

  return (
    <div className="space-y-6">
      {/* 用户等级信息 */}
      <div className="bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 text-white rounded-lg shadow-md p-6 animate-slide-up hover:shadow-lg transition-shadow duration-300 animate-gradient-x bg-[length:200%_200%]">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center text-3xl animate-bounce-gentle hover:scale-110 transition-transform duration-300">
            {currentLevelInfo.badge}
          </div>
          <div>
            <h2 className="text-2xl font-bold flex items-center gap-2">
              <User className="h-6 w-6 animate-pulse" />
              个人档案
            </h2>
            <p className="text-blue-100 animate-fade-in-up animation-delay-200">查看你的摸鱼等级和成就</p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white/10 rounded-lg p-4 animate-fade-in-up hover:bg-white/20 transition-colors duration-300 hover:scale-105 transform">
            <h3 className="font-semibold mb-2">当前等级</h3>
            <div className="text-2xl font-bold mb-2 animate-count-up">
              {currentLevelInfo.title}
            </div>
            <div className="text-sm text-blue-100">
              等级 {stats.currentLevel} • {stats.totalEvents} / {nextLevelInfo?.minEvents || '∞'} 次
            </div>
          </div>

          <div className="bg-white/10 rounded-lg p-4 animate-fade-in-up animation-delay-200 hover:bg-white/20 transition-colors duration-300 hover:scale-105 transform">
            <h3 className="font-semibold mb-2">摸鱼统计</h3>
            <div className="space-y-1">
              <div className="flex justify-between">
                <span>总次数</span>
                <span className="font-bold animate-count-up">{stats.totalEvents}次</span>
              </div>
              <div className="flex justify-between">
                <span>总时长</span>
                <span className="font-bold animate-count-up">{Math.floor(stats.totalDuration / 60)}h {stats.totalDuration % 60}m</span>
              </div>
              <div className="flex justify-between">
                <span>平均时长</span>
                <span className="font-bold">
                  <span className="animate-count-up">{stats.totalEvents > 0 ? Math.round(stats.totalDuration / stats.totalEvents) : 0}</span>分钟
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* 升级进度 */}
        {nextLevelInfo && (
          <div className="mt-6 animate-fade-in-up animation-delay-400">
            <div className="flex justify-between text-sm mb-2">
              <span>升级进度</span>
              <span>{stats.levelProgress.toFixed(1)}%</span>
            </div>
            <div className="bg-white/20 rounded-full h-3 overflow-hidden hover:h-4 transition-all duration-300">
              <div
                className="bg-gradient-to-r from-yellow-400 to-orange-400 h-3 rounded-full transition-all duration-1000 ease-out animate-shimmer bg-[length:200%_100%]"
                style={{ width: `${stats.levelProgress}%` }}
              />
            </div>
            <div className="text-xs text-blue-100 mt-1">
              还需要 {nextLevelInfo.minEvents - stats.totalEvents} 次摸鱼升级到 "{nextLevelInfo.title}"
            </div>
          </div>
        )}
      </div>

      {/* 成就系统 */}
      <div className="bg-white rounded-lg shadow-md p-6 animate-slide-up animation-delay-200 hover:shadow-lg transition-shadow duration-300">
        <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
          <Award className="h-5 w-5 animate-bounce-gentle" />
          成就展示 ({achievements.length})
        </h3>
        
        {achievements.length === 0 ? (
          <div className="text-center py-8 animate-fade-in">
            <Target className="h-12 w-12 text-gray-300 mx-auto mb-4 animate-pulse" />
            <p className="text-gray-600">开始摸鱼来获得第一个成就吧！</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {achievements.map((achievement, index) => (
              <div
                key={index}
                className="border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-fade-in-up hover:border-yellow-300"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="flex items-center gap-3">
                  <div className="text-2xl animate-bounce-gentle">{achievement.icon}</div>
                  <div>
                    <div className="font-semibold text-gray-800 hover:text-yellow-600 transition-colors duration-200">{achievement.title}</div>
                    <div className="text-sm text-gray-600">{achievement.desc}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 数据管理 */}
      <div className="bg-white rounded-lg shadow-md p-6 animate-slide-up animation-delay-400 hover:shadow-lg transition-shadow duration-300">
        <h3 className="text-lg font-semibold text-gray-800 mb-4 animate-fade-in-up">数据管理</h3>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button
            onClick={onExportData}
            className="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 active:scale-95 hover:shadow-lg animate-fade-in-up"
          >
            <Download className="h-4 w-4 animate-bounce-gentle" />
            导出数据
          </button>
          
          <label className="flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 active:scale-95 hover:shadow-lg cursor-pointer animate-fade-in-up animation-delay-200">
            <Upload className="h-4 w-4 animate-bounce-gentle" />
            导入数据
            <input
              type="file"
              accept=".json"
              onChange={onImportData}
              className="hidden"
            />
          </label>
          
          <button
            onClick={onClearData}
            className="flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 active:scale-95 hover:shadow-lg animate-fade-in-up animation-delay-400"
          >
            <Trash2 className="h-4 w-4 animate-wiggle" />
            清空数据
          </button>
        </div>
        
        <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg animate-fade-in-up animation-delay-600 hover:bg-yellow-100 transition-colors duration-300">
          <p className="text-sm text-yellow-800">
            💡 提示：定期导出数据以防丢失，导入时请选择之前导出的JSON文件。
          </p>
        </div>
      </div>
    </div>
  );
};

export default UserProfile;